<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		div{border: 1px solid red;margin: 10px;}
		.inner{height: 400px;width: auto;}
			ul {
				list-style-type: none;
			}
			
			li {
				background-color: green;
				margin: 5px;
				border: 1px solid;
				padding: 5px;
				float: left;
			}
		</style>
		
		<script type="text/javascript">
		
//			定义一个函数,专门用来为指定元素绑定单击响应函数
//			参数:  
//				idStr 要绑定单击响应函数的对象的id属性值
//				fun 事件的回调,当单击元素时,该函数将会被触发	
			function myClick(idStr,fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
		
		
		
			window.onload = function(){
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
				//查找#bj的节点	
					var bj = document.getElementById("bj");
					//打印
					//innerHTML通过这个属性可以获取到元素内部的HTML代码
					alert(bj.innerHTML);
				}
			
			
			
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点
					//这个方法会给我们返回一个数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印
//					alert(lis.length);

					//遍历
					for(var i=0;i<lis.length;i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
					//为id为btn03的按钮绑定一个单击响应函数
					var btn03 = document.getElementById("btn03");
					btn03.onclick = function(){
						//查找name=gender的所有节点
						var inputs = document.getElementsByName("gender");
						
//						alert(inputs.length);
						
						for(var i=0; i<inputs.length;i++){
							
//							innerHTML用于获取元素内部的HTML代码的
//							对于自结束标签,这个属性没有意义

//							alert(inputs[i].innerHTML);

//							如果需要读取元素节点属性
//								直接使用元素.属性名
//									例子,元素.id 元素.name 元素.value
//									注意:class属性不能采用这种方式
//									读取class属性时需要使用元素.classname
							alert(inputs[i].className);
						}
					};
					
					
					//为id为btn04的按钮绑定一个单击响应函数
					var btn04 = document.getElementById("btn04");
					btn04.onclick = function(){
						
						//获取id为city的元素
						var city = document.getElementById("city");
						//查找#city下所有的li节点
						var lis = city.getElementsByTagName("li");
						
//						alert (lis.length);
						for(var i=0; i<lis.length;i++){
							alert(lis[i].innerHTML);
						}
					};
					
					//为id为btn05的按钮绑定一个单击响应函数
					var btn05 = document.getElementById("btn05");
					btn05.onclick = function(){
						
					//放回#city的所有子节点
					
//					childNodes属性会获取包括文本节点在内的所有节点
//					根据DOM标签与标签间空白也会当成文本节点
//					注意:在IE8及一下的浏览器中不会将空白文本当成子节点
//					所以该属性在IE8会返回四个子元素而其它浏览器是9个
					var city = document.getElementById("city");
					var cns = city.childNodes;
					
//					for(var i=0; i<cns.length; i++){
//							alert(cns[i].innerHTML);
//						}
//					alert(cns.length);
					var cns2 = city.children;
						
//						children属性可以获取当前元素的所有子元素
						for(var i=0; i<cns2.length; i++){
							alert(cns2[i].innerHTML);
						}
						
					};
					
					
					//为id为btn06的按钮绑定一个单击响应函数
					var btn06 = document.getElementById("btn06");
					btn06.onclick = function(){
						//获取#phone的元素
						var phone = document.getElementById("phone");
//					反回#phoned的第一个子节点
//						var phone2 = phone.childNodes[0];
//						alert(phone2.innerHTML);
					
						//firstChild可以获取到当前元素的第一个子节点（包过空白文本节点）
//						var fir = phone.firstChild;
						//firstElementChild获取当前元素的第一个子元素,不支持IE8及以下的浏览器
						var fir = phone.firstElementChild;
						alert(fir);
					};
					
					
					//为id为btn07的按钮绑定一个单击响应函数
					myClick("btn07",function(){
						
						//获取id为bj的父节点
						var bj = document.getElementById("bj");
//						alert("h");
					//返回#bj的父节点
					var pn = bj.parentNode;
					
					alert(pn.innerHTML);
					
					/*
					 innerText
					 --该属性可以获取到元素内部的文本内容
					 --它和innerHTML类似，不同的是它会自动将HTML去除
					 * */
//					alert(pn.innerText);
					});
					
					//为id为btn08的按钮绑定一个单击响应函数
					myClick("btn08",function(){

					//获取android的id
					var and = document.getElementById("android");
					//返回#android的前一个兄弟节点(也可能获取到空白的文本)
					var ps = and.previousSibling;
					
					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
					var ps = and.previousElementSibling;
						alert(ps.innerHTML);
						
					});
					
					
					
					//为id为btn09的按钮绑定一个单击响应函数
					myClick("btn09",function(){
					//获取username的id
					var us = document.getElementById("username");
					
					//读取username的value属性
					var va = us.value;
					alert(va);
					});
					
					
					//为id为btn10的按钮绑定一个单击响应函数
					myClick("btn10",function(){
					
					//获取#username的id
					var us = document.getElementById("username");
					//设置#username的value属性值
					us.value = "点击了改变的内容！！！";
					});
					
					
					//为id为btn11的按钮绑定一个单击响应函数
					myClick("btn11",function(){
						
						//获取#bj的id
						var bj = document.getElementById("bj");
						
					//返回#bj文本值
//					alert(bj.innerHTML);
//					alert(bj.innerText);
					
					//获取bj的文本节点
					var fc = bj.firstChild;
					alert(fc.nodeValue);
					});
					
					
			}
			
		</script>
	</head>

	<body>
		<div id="total">
			<div class="inner">
				<p>你喜欢哪个城市？</p>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>广州</li>
					<li>佛山</li>
				</ul>
				
				<br /><br />
				
				<p>你喜欢哪个单击游戏？</p>
				<ul id="game">
					<li id="rl">红警</li>
					<li>泡泡堂</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>
				
				<br /><br />
				
				<p>你手机操作系统是？</p>
				<ul id="phone">
					<li>ios</li>
					<li id="android">Android</li>
					<li>windows Phone</li>
				</ul>
			</div>
		</div>
		
		<div class="inners">
				gender:
				<input class="aaa" type="radio" name="gender" value="male" />
				Male
				<input class="aaa" type="radio" name="gender" value="female" />
				Female
				<br /><br />
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		<div>
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj文本值</button></div>
			
		</div>

	</body>

</html>